[APPS-2947] Add: return connection IDs from debugBundle and attach the bundle to framed backend calls - #566

// qa-app/main.js
import { postMessage as runBackend } from './backend/actionCatalogCall.backend.ts';
runBackend().then(
    (result) => { window.__result = result; },
    (error) => { window.__error = String(error); },
);

// qa-app/multi.js — three back-to-back calls, a 3.5s pause, then a fourth call
import { postMessage as runBackend } from './backend/actionCatalogCall.backend.ts';
const timeCall = async () => {
    const start = performance.now();
    await runBackend();
    return Math.round(performance.now() - start);
};
(async () => {
    const timings = [];
    for (let i = 0; i < 3; i++) {
        timings.push(await timeCall());
    }
    await new Promise((resolve) => setTimeout(resolve, 3500));
    timings.push(await timeCall());
    window.__timings = timings;
})().catch((error) => { window.__error = String(error); });

// qa-server.cjs — run: W=<repo> S=<harness dir> node qa-server.cjs
const { W, S } = process.env;
const { createServer } = require(`${W}/node_modules/vite`);
const { datadogVitePlugin } = require(`${W}/packages/published/vite-plugin/dist/src/index.js`);
(async () => {
    const server = await createServer({
        configFile: false,
        root: `${S}/qa-app`,
        cacheDir: `${S}/qa-vite-cache`,
        logLevel: 'warn',
        server: { port: 5199, strictPort: true, hmr: false, allowedHosts: ['preview.qa.test'], fs: { allow: [S, W] } },
        optimizeDeps: { noDiscovery: true },
        plugins: [datadogVitePlugin({ apps: { enable: true } })],
    });
    await server.listen();
    console.log('QA_SERVER_READY');
})();

// qa-server-base.cjs — run: W=<repo> S=<harness dir> node qa-server-base.cjs (qa-server.cjs with base /myapp/ on port 5197)
const { W, S } = process.env;
const { createServer } = require(`${W}/node_modules/vite`);
const { datadogVitePlugin } = require(`${W}/packages/published/vite-plugin/dist/src/index.js`);
(async () => {
    const server = await createServer({
        configFile: false,
        base: '/myapp/',
        root: `${S}/qa-app`,
        cacheDir: `${S}/qa-vite-cache-base`,
        logLevel: 'warn',
        server: { port: 5197, strictPort: true, hmr: false, fs: { allow: [S, W] } },
        optimizeDeps: { noDiscovery: true },
        plugins: [datadogVitePlugin({ apps: { enable: true } })],
    });
    await server.listen();
    console.log('QA_SERVER_READY');
})();

// qa-browser-parent.cjs — run: W=<repo> S=<harness dir> QA_BROWSER=chromium|firefox node qa-browser-parent.cjs <parentOrigin> <appPath>
const fs = require('fs');
const { W, S, QA_BROWSER = 'chromium' } = process.env;
const browserType = require(`${W}/node_modules/playwright`)[QA_BROWSER];
const [parentOrigin, appPath] = process.argv.slice(2);
(async () => {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    const parentHtml = fs.readFileSync(`${S}/qa-app/parent.html`, 'utf8')
        .replace('src="/index.html"', 'src="http://localhost:5199' + appPath + '"');
    const fetches = [];
    page.on('request', (request) => { if (request.url().includes('__dd/debugBundle')) fetches.push(request.url()); });
    await page.route(parentOrigin + '/**', (route) => route.fulfill({ contentType: 'text/html', body: parentHtml }));
    await page.goto(parentOrigin + '/parent.html');
    const frame = page.frames().find((f) => f.url().endsWith(appPath));
    await frame.waitForFunction(() => window.__result !== undefined || window.__error !== undefined, null, { timeout: 60000 });
    const message = await page.evaluate(() => window.__message);
    console.log(JSON.stringify({
        browser: QA_BROWSER,
        parentOrigin,
        appPath,
        devClient: await frame.evaluate(() => typeof globalThis.DD_APPS_PREPARE_CALL === 'function'),
        ancestorOrigin: await frame.evaluate(() => (location.ancestorOrigins ? location.ancestorOrigins[0] : 'unsupported')),
        referrer: await frame.evaluate(() => document.referrer),
        bundleFetches: fetches,
        hasBundle: 'bundle' in message,
        allowedConnectionIds: message.bundle && message.bundle.allowedConnectionIds,
        frameResult: await frame.evaluate(() => window.__result ?? window.__error),
    }));
    await browser.close();
})().catch((error) => { console.error(error); process.exit(1); });

// qa-browser.cjs — run: W=<repo> QA_BROWSER=chromium|firefox node qa-browser.cjs (parent page served by the dev server)
const { W, QA_BROWSER = 'chromium' } = process.env;
const browserType = require(`${W}/node_modules/playwright`)[QA_BROWSER];
(async () => {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    const fetches = [];
    page.on('request', (request) => { if (request.url().includes('__dd/debugBundle')) fetches.push(request.url()); });
    await page.goto('http://localhost:5199/parent.html');
    const frame = page.frames().find((f) => f.url().endsWith('/index.html'));
    await frame.waitForFunction(() => window.__result !== undefined || window.__error !== undefined, null, { timeout: 60000 });
    const message = await page.evaluate(() => window.__message);
    console.log(JSON.stringify({
        browser: QA_BROWSER,
        type: message.type,
        bundleFetches: fetches,
        hasBundle: 'bundle' in message,
        frameResult: await frame.evaluate(() => window.__result ?? window.__error),
    }));
    await browser.close();
})().catch((error) => { console.error(error); process.exit(1); });

// qa-browser-https.cjs — run: W=<repo> S=<harness dir> QA_BROWSER=chromium|firefox node qa-browser-https.cjs <parentOrigin> <appPath>
// Like qa-browser-parent.cjs, but the frame is served from an https origin (proxied to the
// local dev server), as a real preview is.
const fs = require('fs');
const { W, S, QA_BROWSER = 'chromium' } = process.env;
const browserType = require(`${W}/node_modules/playwright`)[QA_BROWSER];
const [parentOrigin, appPath] = process.argv.slice(2);
const FRAME_ORIGIN = 'https://preview.qa.test';
(async () => {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    const parentHtml = fs.readFileSync(`${S}/qa-app/parent.html`, 'utf8')
        .replace('src="/index.html"', 'src="' + FRAME_ORIGIN + appPath + '"');
    const fetches = [];
    page.on('request', (request) => { if (request.url().includes('__dd/debugBundle')) fetches.push(request.url()); });
    await page.route(parentOrigin + '/**', (route) => route.fulfill({ contentType: 'text/html', body: parentHtml }));
    await page.route(FRAME_ORIGIN + '/**', async (route) => {
        const target = route.request().url().replace(FRAME_ORIGIN, 'http://localhost:5199');
        // Keep the browser's Host, as the Live Preview proxy does, so it matches the Origin.
        const headers = { ...route.request().headers(), host: 'preview.qa.test' };
        const response = await route.fetch({ url: target, headers });
        await route.fulfill({ response });
    });
    await page.goto(parentOrigin + '/parent.html');
    const frame = page.frames().find((f) => f.url().endsWith(appPath));
    await frame.waitForFunction(() => window.__result !== undefined || window.__error !== undefined, null, { timeout: 60000 });
    const message = await page.evaluate(() => window.__message);
    console.log(JSON.stringify({
        browser: QA_BROWSER,
        parentOrigin,
        frameOrigin: FRAME_ORIGIN,
        appPath,
        devClient: await frame.evaluate(() => typeof globalThis.DD_APPS_PREPARE_CALL === 'function'),
        ancestorOrigin: await frame.evaluate(() => (location.ancestorOrigins ? location.ancestorOrigins[0] : 'unsupported')),
        referrer: await frame.evaluate(() => document.referrer),
        bundleFetches: fetches,
        hasBundle: 'bundle' in message,
        allowedConnectionIds: message.bundle && message.bundle.allowedConnectionIds,
        frameResult: await frame.evaluate(() => window.__result ?? window.__error),
    }));
    await browser.close();
})().catch((error) => { console.error(error); process.exit(1); });

// qa-browser-ping.cjs — run: W=<repo> S=<harness dir> QA_BROWSER=chromium|firefox node qa-browser-ping.cjs never|late
const fs = require('fs');
const { W, S, QA_BROWSER = 'chromium' } = process.env;
const browserType = require(`${W}/node_modules/playwright`)[QA_BROWSER];
const mode = process.argv[2];
const PARENT = 'https://app.datadoghq.com';
(async () => {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    const parentHtml = fs.readFileSync(`${S}/qa-app/parent-ping.html`, 'utf8')
        .replace('src="/multi.html"', 'src="http://localhost:5199/multi.html"');
    const warnings = [];
    page.on('console', (message) => { if (message.type() === 'warning' && message.text().includes('[dd-apps]')) warnings.push(message.text()); });
    const fetches = [];
    page.on('request', (request) => { if (request.url().includes('__dd/debugBundle')) fetches.push(request.url()); });
    await page.route(PARENT + '/**', (route) => route.fulfill({ contentType: 'text/html', body: parentHtml }));
    await page.goto(`${PARENT}/parent-ping.html?mode=${mode}`);
    const frame = page.frames().find((f) => f.url().endsWith('/multi.html'));
    await frame.waitForFunction(() => window.__timings !== undefined || window.__error !== undefined, null, { timeout: 60000 });
    console.log(JSON.stringify({
        browser: QA_BROWSER,
        mode,
        callMs: await frame.evaluate(() => window.__timings ?? window.__error),
        pings: await page.evaluate(() => window.__pings),
        hasBundle: await page.evaluate(() => window.__bundles),
        bundleFetches: fetches.length,
        warnings,
    }));
    await browser.close();
})().catch((error) => { console.error(error); process.exit(1); });

// qa-build.cjs — run: W=<repo> S=<harness dir> node qa-build.cjs
const { W, S } = process.env;
const { build } = require(`${W}/node_modules/vite`);
const { datadogVitePlugin } = require(`${W}/packages/published/vite-plugin/dist/src/index.js`);
build({
    configFile: false,
    root: `${S}/qa-app`,
    logLevel: 'warn',
    build: { outDir: `${S}/qa-dist`, emptyOutDir: true },
    plugins: [datadogVitePlugin({ apps: { enable: true } })],
}).then(() => console.log('QA_BUILD_DONE'), (error) => { console.error(error); process.exit(1); });